import React, { Component } from "react";
import { Row, Col, Select, InputNumber, Tabs, Radio } from "antd";
import styles from "./FrequencyCom.less";

const { Option } = Select;
const { TabPane } = Tabs;
const { Group } = Radio;

class FrequencyCom extends Component {
  render() {
    const { operate } = this.props;
    return (
      <Row style={{ marginBottom: 22 }}>
        <Col span={8} style={{ display: "flex", justifyContent: "flex-end" }}>
          <div
            style={{
              display: "flex",
              color: "rgba(0,0,0,0.85)",
              fontSize: 14
            }}
          >
            <span className={styles.star}>*</span>推送频率：
          </div>
        </Col>
        <Col span={16}>
          <Group
            onChange={this.props.selFreq}
            value={this.props.freqType}
            disabled={operate === "audit" || operate === "detail"}
          >
            <Tabs
              type="card"
              size="small"
              style={{ marginBottom: 22 }}
              activeKey={this.props.TabData}
              onChange={this.props.onChangeTab}
              disabled={operate === "audit" || operate === "detail"}
            >
              <TabPane tab="时" key="1" onChange={this.props.tabChange}>
                <div style={{ display: "flex", flexDirection: "column" }}>
                  <Radio value="hour1" style={{ marginBottom: 20 }}>
                    <span style={{ marginLeft: 4, marginRight: 4 }}>从</span>{" "}
                    <Select
                      style={{ width: 120 }}
                      onChange={this.props.selectStartTime}
                      disabled={
                        this.props.freqType !== "hour1" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      value={this.props.startHour}
                    >
                      {this.props.time.map(item => (
                        <Option value={item.key} key={item.key}>
                          {item.value}
                        </Option>
                      ))}
                    </Select>{" "}
                    {`到 `}
                    <Select
                      style={{ width: 120 }}
                      onChange={this.props.selectEndTime}
                      disabled={
                        this.props.freqType !== "hour1" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      value={this.props.endHour}
                    >
                      {this.props.time.map(item => (
                        <Option value={item.key} key={item.key}>
                          {item.value}
                        </Option>
                      ))}
                    </Select>{" "}
                    {`每 `}
                    <InputNumber
                      style={{ width: 70 }}
                      onChange={this.props.inputHour}
                      disabled={
                        this.props.freqType !== "hour1" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      value={this.props.hourGap}
                      min={0}
                      max={24}
                    />{" "}
                    小时推送一次
                  </Radio>
                  <Radio value="hour2">
                    指定时间：
                    <Select
                      style={{ width: 360 }}
                      mode="tags"
                      onChange={this.props.SelfTime}
                      disabled={
                        this.props.freqType !== "hour2" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      value={this.props.SelfHour}
                    >
                      {this.props.time.map(item => (
                        <Option value={item.key} key={item.key}>
                          {item.value}
                        </Option>
                      ))}
                    </Select>
                    {`  推送`}
                  </Radio>
                </div>
              </TabPane>
              <TabPane tab="日" key="2">
                <div style={{ display: "flex", flexDirection: "column" }}>
                  <Radio value="day1" style={{ marginBottom: 20 }}>
                    <span style={{ marginRight: 4 }}>每天</span>
                    <Select
                      style={{ width: 520 }}
                      mode="tags"
                      disabled={
                        this.props.freqType !== "day1" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      onChange={this.props.selDayhour1}
                      value={this.props.dayHour1}
                    >
                      {this.props.time.map(item => (
                        <Option value={item.key} key={item.key}>
                          {item.value}
                        </Option>
                      ))}
                    </Select>
                    <span style={{ marginLeft: 4 }}>推送</span>
                  </Radio>
                  <Radio value="day2">
                    <span style={{ marginRight: 4 }}>每月指定日</span>
                    <Select
                      style={{ width: 240 }}
                      mode="tags"
                      disabled={
                        this.props.freqType !== "day2" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      onChange={this.props.selDay}
                      value={this.props.day}
                    >
                      {this.props.dayData.map(item => (
                        <Option value={`${item}`} key={item}>
                          {`${item}`}
                        </Option>
                      ))}
                    </Select>
                    <span style={{ marginLeft: 4, marginRight: 4 }}>每天</span>
                    <Select
                      style={{ width: 240 }}
                      mode="tags"
                      disabled={
                        this.props.freqType !== "day2" ||
                        operate === "audit" ||
                        operate === "detail"
                      }
                      onChange={this.props.selDayhour2}
                      value={this.props.dayHour2}
                    >
                      {this.props.time.map(item => (
                        <Option value={item.key} key={item.key}>
                          {item.value}
                        </Option>
                      ))}
                    </Select>
                    <span style={{ marginLeft: 4 }}>推送</span>
                  </Radio>
                </div>
              </TabPane>
              <TabPane tab="周" key="3">
                <Radio value="week">
                  <span style={{ marginRight: 4 }}>每</span>
                  <Select
                    style={{ width: 240 }}
                    mode="tags"
                    disabled={
                      this.props.freqType !== "week" ||
                      operate === "audit" ||
                      operate === "detail"
                    }
                    onChange={this.props.selWeek}
                    value={this.props.week}
                  >
                    {this.props.weekData.map(item => (
                      <Option value={`${item.value}`} key={item.value}>
                        {item.title}
                      </Option>
                    ))}
                  </Select>
                  <span style={{ marginLeft: 4, marginRight: 4 }}>每天</span>
                  <Select
                    style={{ width: 240 }}
                    mode="tags"
                    disabled={
                      this.props.freqType !== "week" ||
                      operate === "audit" ||
                      operate === "detail"
                    }
                    onChange={this.props.selWeekhour}
                    value={this.props.weekHour}
                  >
                    {this.props.time.map(item => (
                      <Option value={item.key} key={item.key}>
                        {item.value}
                      </Option>
                    ))}
                  </Select>
                  <span style={{ marginLeft: 4 }}>推送</span>
                </Radio>
              </TabPane>
            </Tabs>
            {this.props.freq ? (
              <span
                style={{
                  color: "#f5222d",
                  marginBottom: 22,
                  marginTop: -12
                }}
              >
                请选择一项推送频率
              </span>
            ) : null}
            {this.props.freqWord ? (
              <span
                style={{
                  color: "#f5222d",
                  marginBottom: 22,
                  marginTop: -12
                }}
              >
                请自定义推送频率
              </span>
            ) : null}
          </Group>
        </Col>
      </Row>
    );
  }
}

export default FrequencyCom;
